package io.wongxd.demo.page.views

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.wongxd.demo.M
import io.wongxd.solution.baseView.BaseComposeToolBarFgt
import io.wongxd.solution.compose.custom.views.compose_pager.ComposePager
import io.wongxd.solution.compose.custom.views.compose_pager.ComposePagerState
import io.wongxd.solution.compose.custom.views.other.FpsText
import io.wongxd.solution.compose.custom.views.pager_indicator.TextPagerIndicator

class FgtViewTextIndicator : BaseComposeToolBarFgt() {
    override fun lazyInit() {

    }

    override val title: String
        get() = "FgtViewTextIndicator"

    @Composable
    override fun Render() {
        ComposeContent()
    }

    private val colors = mutableStateListOf(
        Color(150, 105, 61, 255) to "魔狱血刹",
        Color.Black to "暴走",
        Color.DarkGray to "十字斩",
        Color(122, 138, 55, 255) to "崩山击",
        Color(114, 61, 101, 255) to "崩山裂地斩",
        Color.Gray to "怒气爆发",
        Color(112, 62, 11, 255) to "嗜魂封魔斩",
        Color(50, 134, 74, 255) to "噬魂之手",
    )
    private val texts = colors.map { it.second }
    private val pagerState = ComposePagerState()
    private val textColor = Color(0xff999999)
    private val selectTextColor = Color(0xff333333)
    private val selectIndicatorColor = Color(0xff1773FC)

    @Composable
    private fun ComposeContent() {
        Column {
            Menu()
            MTextPagerIndicator()
            MComposePager()
        }
    }

    @Composable
    private fun MComposePager() {
        ComposePager(
            pageCount = colors.size,
            modifier = M.fillMaxSize(),
            composePagerState = pagerState,
            orientation = Orientation.Horizontal,
        ) {
            Box(
                modifier = M
                    .fillMaxSize()
                    .background(colors[index].first)
            )
        }
    }

    @Composable
    private fun MTextPagerIndicator() {
        TextPagerIndicator(
            texts = texts,
            offsetPercentWithSelectFlow = remember { pagerState.createChildOffsetPercentFlow() },
            selectIndexFlow = remember { pagerState.createCurrSelectIndexFlow() },
            fontSize = 16.sp,
            selectFontSize = 20.sp,
            textColor = textColor,
            selectTextColor = selectTextColor,
            selectIndicatorColor = selectIndicatorColor,
            onIndicatorClick = {
                pagerState.setPageIndexWithAnimate(it)
            },
            modifier = M
                .fillMaxWidth()
                .height(35.dp),
            margin = 28.dp,
        )
    }

    @Composable
    private fun Menu() {
        FpsText(modifier = M)
        Row {
            Button({ pagerState.setPageIndexWithAnimate(pagerState.getCurrSelectIndex() + 1) }) {
                Text(
                    "+1"
                )
            }
            Button({ pagerState.setPageIndexWithAnimate(pagerState.getCurrSelectIndex() + 2) }) {
                Text(
                    "+2"
                )
            }
            Button({ pagerState.setPageIndexWithAnimate(pagerState.getCurrSelectIndex() - 1) }) {
                Text(
                    "-1"
                )
            }
            Button({ pagerState.setPageIndexWithAnimate(pagerState.getCurrSelectIndex() - 2) }) {
                Text(
                    "-2"
                )
            }
        }
    }

    @Preview(showBackground = true, backgroundColor = 0xffffffff)
    @Composable
    fun RenderPreView() {

    }
}